
<template>
  <div class="center">

  <div class="box1">
    <div class="info-box">
      <div class="info">
        <div class="info-head"> <img src="../../assets/images/iconONe.png" alt="s" /></div>
        <div class="info-head-text">我们的在线送检服务让您免去排队之苦，便捷高效地提交检测需求。仅需几步简单操作，即可在线完成样品登记和数据提交。</div>
      </div>
      <div class="info">
        <div class="info-head"><img src="../../assets/images/iconTwo.png" alt="w" /></div>
        <div class="info-head-text">我们的在线送检服务让您免去排队之苦，便捷高效地提交检测需求。仅需几步简单操作，即可在线完成样品登记和数据提交。</div>
      </div>
      <div class="info">
        <div class="info-head"><img src="../../assets/images/iconThree.png" alt="r" /></div>
        <div class="info-head-text">我们的在线送检服务让您免去排队之苦，便捷高效地提交检测需求。仅需几步简单操作，即可在线完成样品登记和数据提交。</div>
      </div>
    </div>
  </div>

  <div class="box2">
    <div class="box2Center">
      <h2><img src="../../assets/images/FrameOne.png"></h2>
      <div class="b2-text-center">
        <div class="b2-info">
          <div class="b2-ico"><img src="../../assets/images/btwo.png"></div>
          <div class="b2-info-head">专业的计量校准团队</div>
          <p>我们拥有众多专业的计量校准团队。以客户为本、为客户提供优越计量服务、合理的价格、完善的售后服务质量是公司的宗旨</p>
        </div>
        <div class="b2-info">
          <div class="b2-ico"><img src="../../assets/images/bone.png"></div>
          <div class="b2-info-head">快速响应业务专家</div>
          <p>通过ISO17025计量准则要求，认可校准项目范围涵盖广，涵盖长度、力学、温度、电磁、无线电、光学、时间频率、理化、声学、电离等计量实验室。</p>
        </div>
        <div class="b2-info">
          <div class="b2-ico"><img src="../../assets/images/bthree.png"></div>
          <div class="b2-info-head">专业的计量校准团队</div>
          <p>我们承诺，我们视设备的安全高效运转为立身之本，所有计量证书3天左右出证并提供额外加急服务。业务专家全面提供7x24小时的全天候响应服务，随时随地为您待命，做到全中国领衔的响应速度。</p>
        </div>
      </div>
    </div>
  </div>

  <div class="box3">
    <h2><img src="../../assets/images/FrameBone.png"></h2>
    <h3>以精准、高效、专业为准则，我们承诺</h3>
    <div class="box3-box">
      <div class="box3-box-left">我们的实验室具备CNAS认可，检测领域全覆盖，符合ISO/IEC 17025：2005《检测和校准实验室能力的通用要求》（CNAS-CL01《检测和校准实验室能力认可准则》）的要求，具备承担本证书附件所列检测和校准服务的能力，助力中国制造。</div>
      <div class="box3-box-right">
        <div class="box3-box-right-1">
          <img src="../../assets/images/Groupfone.png">
          <p></p>
        </div>
        <div class="box3-box-right-2">
          <img src="../../assets/images/Groupftwo.png">
          <p></p>
        </div>
        <div class="box3-box-right-3">
          <img src="../../assets/images/Groupfthree.png">
          <p></p>
        </div>
        <div class="box3-box-right-4">
          <img src="../../assets/images/Groupffour.png">
          <p></p>
        </div>
      </div>
      <div class="more">了解更多 > </div>
    </div>

  </div>

  <div class="box3BottomPic">
     <img src="../../assets/images/zpic.png">
  </div>

  <div class="box4">
    <h2 class="marginTB80"><img src="../../assets/images/fwPic.png"></h2>
    <div class="box4-data">
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwOne.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwTwo.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwThree.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwFour.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwFive.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwSix.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwseven.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
      <div class="box4-box">
        <div class="box4-box-ico">
          <img src="../../assets/images/fwEight.png"/>
        </div>
        <h5>声学计量</h5>
        <p>可开展消声室、声级计、声校准器、音波式皮带张力计、工作标准传声器等项目的校准</p>
      </div>
    </div>

  </div>

  <div class="box5">
    <div class="box5Center">
      <h2><img src="../../assets/images/ysTitle.png"></h2>
      <h3>我们拥有全国多家合作实验室，满足您全国各地的业务计量需求</h3>
      <div class="box5-data">
        <div class="box5-data-info">
          <h5><3天</h5>
          <p>检测效率高</p>
        </div>
        <div class="box5-data-info">
          <h5>35</h5>
          <p>合作实验室</p>
        </div>
        <div class="box5-data-info">
          <h5>400+</h5>
          <p>能力范围广</p>
        </div>
        <div class="box5-data-info">
          <h5>5,000+</h5>
          <p>累计服务用户数</p>
        </div>
      </div>
    </div>
  </div>

  <div class="box6">
    <h2><img src="../../assets/images/zyTitle.png"></h2>
    <div class="box6-data">
      <div class="box6-data-left">
        <h5><img src="../../assets/images/Star.png" alt=""><em>CNAS认可</em></h5>
        <span><i></i> 具备CNAS认可，检测领域全覆盖，符合ISO/IEC 17025：2005《检测和校准实验室能力的通用要求》</span>
        <span><i></i>（CNAS-CL01《检测和校准实验室能力认可准则》）的要求，具备承担本证书附件所列检测和校准服务的能力，助力中国制造</span>
      </div>
      <div class="box6-data-right">
        <img src="../../assets/images/ysRightPIc.png" alt="">
      </div>
    </div>
  </div>

  <div class="box7">
    <div class="box7Center">
      <h2><img src="../../assets/images/hzTitle.png"></h2>
      <h3>国内领先计量合作机构</h3>
      <div class="box7-data">
        <div class="box7-data-info">
          <p><img src="../../assets/images/hzOne.png" alt=""></p>
          <p><img src="../../assets/images/hzTwo.png" alt=""></p>
          <p><img src="../../assets/images/hzThree.png" alt=""></p>
          <p><img src="../../assets/images/hzFour.png" alt=""></p>
          <p><img src="../../assets/images/hzFive.png" alt=""></p>
          <p><img src="../../assets/images/hzSix.png" alt=""></p>
          <p><img src="../../assets/images/hzSeven.png" alt=""></p>
          <p><img src="../../assets/images/hzEight.png" alt=""></p>
        </div>
      </div>
    </div>
    <div class="box8">
      <h2><img src="../../assets/images/rkTitle.png"></h2>
      <div class="box8-data">
        <div class="box8-data-info">
          <img src="../../assets/images/rkPic.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div class="box9">
    <h2><img src="../../assets/images/newTitle.png"></h2>
    <h3>解决您更多问题</h3>
    <div>
      <div class="box9-data" style="overflow: hidden">
        <div style="float:left">
          <div class="box9-data-info" v-for="(item ,index) in sampleDataLeft " :key="index">
            <div class="box9-data-title" @click="togglePanelLeft(index,$event)">
              <h5>{{item.title}}</h5>
              <span>
                   <i v-if="item.expanded" class="icon-expand"></i>
                    <i v-else class="icon-collapse"></i>
              </span>
            </div>
            <p v-if="item.expanded">{{item.content}}</p>
          </div>
        </div>

        <div style="float:left">
          <div class="box9-data-info" v-for="(item ,index) in sampleDataRight " :key="index">
            <div class="box9-data-title" @click="togglePanelRight(index)">
              <h5>{{item.title}}</h5>
              <span>
                 <i v-if="item.expanded" class="icon-expand"></i>
                  <i v-else class="icon-collapse"></i>
              </span>
            </div>
            <p v-if="item.expanded">{{item.content}}</p>
          </div>
        </div>
      </div>

    </div>

  </div>

 </div>

</template>
<script setup>
  import { ref } from 'vue'

  defineProps({
    msg: String,
  })

  const count = ref(0)
  const sampleDataLeft = ref([
    {
      id: 0,
      title: "计量的定义",
      content: "在现代，计量的科学内涵远远超出“度量衡”的内容。计量的定义是测量及其应用的科学，是实现单位统一、保证量值准确可靠的活动。准确性、一致性、溯源性和法制性是计量最重要的四个特征。",
      expanded: false
    },
    {
      id: 1,
      title: "计量的作用是什么",
      content: "计量关系国计民生，像空气一样，与人类生产生活紧密相连。计量是科技创新的种子、社会进步的基石，是创造质量和控制质量的重要物质手段，是保证国民经济正常运行和公平贸易的基础，也成为国家核心竞争力的重要标志之一。毫无疑问，计量支撑发展，质量成就未来。",
      expanded: false
    },
    {
      id: 2,
      title: "计量的未来展望",
      content: "测量不确定度是表征合理地赋予被测量值的分散性，与测量结果相联系的参数。",
      expanded: false
    },
    {
      id: 3,
      title: "企业如何建立计量器具管理台账以及开展检定、校准工作？",
      content: "企业需要掌握了解计量器具分为强制检定、非强制检定和校准的基本概念，根据不同概念的检定、校准要求建立计量器具管理台账。台账中的具体内容应包括：计量器具名称、规格型号、编号、测量范围、检定或校准时间、检定或校准周期等。另外嘉峪检测网提醒还要明确是送检还是现场检定或校准、确定检定或校准单位以及其他相关内容。通过完善计量器具管理台账，可以对企业在用计量器具的工作状态一目了然。把不同要求的计量器具分类建立台账，按照不同分类做好计量器具的管理工作。",
      expanded: false
    }
  ]);
  const sampleDataRight = ref([

    {
      id: 0,
      title: "什么是测量不确定度？",
      content: "以“计量基准量子化”和“量值传递扁平化”为主要特征的国际计量变革，将完美契合以信息物理融合系统为基础的第四次工业革命的开启。一是基于量子物理的新一代国际单位制；二是突破极限的测量，从原子尺度到超大尺寸范围内的测量，在极端条件下的测量、在干扰或快速变化环境中的测量；三是智能和互联式测量，实现物联网大量的仪器仪表或传感器的在线、远程及扁平化量值溯源；四是嵌入式测量，将计量植入到生产过程，将最精准的计量基标准融入到机器。",
      expanded: false
    },
    {
      id: 0,
      title: "为什么部分计量器具可以上门检定、部分计量器具必须送检？",
      content: "如果计量标准器具便于携带，或者一般大型计量器具或受搬动会影响的精密仪器，在现场环境可以满足检定要求的情况下可以采用上门检定。一般情况下，计量器具的检定活动都是在技术规范要求的恒温、恒湿等环境下开展，需要送至计量技术机构实验室进行。",
      expanded: false
    },
    {
      id: 0,
      title: "实行强制检定的计量器具包括哪些？",
      content: "根据《计量法》第九条，实行强制检定的计量器具包括3大类：一是社会公用计量标准器具；二是部门和企业、事业单位使用的最高计量标准器具；三是列入国家市场监督管理总局发布的《实施强制管理的计量器具目录》中实施强制检定且用于贸易结算、安全防护、医疗卫生、环境监测4各方面的工作计量器具。所以，实行强制检定的计量器具不是只有工作计量器具，还有计量标准器具。\n" +
          " 参见：实施强制管理的计量器具目录",
      expanded: false
    },
    {
      id: 0,
      title: "如何确定非强制检定计量器具的检定或校准周期？",
      content: "根据计量器具的实际使用情况，本着科学、经济和量值准确的原则确定非强检计量器具检定或校准周期。应注意的几个方面：一是不得使用未经检定、校准的计量器具；二是不要刻意去延长检定或校准周期，应参照检定规程或校准规范的规定；三是必须依靠专业计量技术机构的指导或由生产企业出具建议",
      expanded: false
    }
  ]);



  const isExpanded = ref(false)

  const togglePanelLeft = (index,event) => {

    sampleDataLeft.value.forEach( (item , i) => {
      if (i === index) {
        console.log(`✅ 展开索引 ${i}`);
        item.expanded = !item.expanded;
        item.icon = item.expanded ? 'expand_icon' : 'collapse_icon';
      } else {
        if (item.expanded) {
          console.log(`❌ 关闭索引 ${i}`);
          item.expanded = false;
        }
      }
    });
  }

  const togglePanelRight = (index) => {
    sampleDataRight.value.forEach( (item , i) => {
      if (i == index) {
        // 切换当前面板状态
        item.expanded = !item.expanded;
      } else {
        // 关闭其他面板
        item.expanded = false;
      }
    });
  }



</script>
<style scoped lang="less">
 .box1{
   width: 100%;
   height: 720px;
   background: url(../../assets/images/首页.png) no-repeat;
   background-size: cover;
   position: relative;
   margin-bottom: 400px;
 }
 .info-box {
   position: absolute;
   left: 50%;
   margin-left: -700px ;
   bottom: -260px;
   width: 1400px;

   display: flex;
   justify-content: space-between; /* 关键属性：两端对齐 */
   padding: 10px;
   .info{
     width: 446px;
     height: 335px;
     //box-shadow: 0px 4px 12px 0px #9D9D9D 25%;
     box-shadow: 0px 4px 12px 0px rgba(157, 157, 157, 0.25);

     .info-head{
       width: 446px;
       height: 144px ;
       img{
         width: 100%;
         height: auto;
       }
     }
     .info-head-text{
       padding: 10px;
       font-weight: 400;
       font-size: 22px;
       line-height: 38px;
       color: #666666;
     }
   }
 }
 .box2{
    background: #F6F8FC;
    .box2Center{
      padding: 80px 0;
      width: 1400px;
      margin: 0 auto;
      .b2-text-center{
        display: flex;
        justify-content: space-between;
        margin: 50px 0;
      }
      .b2-info{
        width: 446px;
        .b2-ico{
          width: 150px;
          height: 150px;
          margin: 0 auto;
        ;
          padding: 13px 0;
          img{
            width: 120px;
            height: 120px;
          }
        }
        .b2-info-head{
          color: #333;
          font-weight: 700;
          margin: 20px 0;
        }
      }
    }

  }
 .box3{
   margin: 80px 0;
   h3{
     margin: 30px 0;
   }
   .box3-box{
     width: 1400px;
     margin: 0 auto;
     //display: flex;
     //justify-content: space-between;
     font-size: 20px;
     .box3-box-left{
       float: left;
       padding: 40px 30px;
       width: 338px;
       height: 446px;
       background: url(../../assets/images/boxThreeLeftPic.png) no-repeat;
       background-size: 100% 100%;
     }
     .box3-box-right{
       display: flex;
       flex-wrap: wrap;
       div{
         width: 498px;
         height: 218px;
         img{
           width: 100%;
           height: auto;
         }
       }
     }
   }
   .more{
     width: 226px;
     height: 54px;
     line-height: 54px;
     opacity: 1;
     border-radius: 3px;
     background: linear-gradient(90deg, #45AFFF 0%, #5669E7 100%);
     margin: 40px auto;
     color: #fff;
   }

 }
 .box3BottomPic{
   width: 100%;
   height: 680px;
   //background: url(../../assets/images/zpic.png) no-repeat;
   //background-size: 100% 100%;
   overflow: hidden;
   img{
     width: 100%;
     height: auto;
   }
 }
 .marginTB80{
   margin: 80px auto;
 }
 .box4{
   width: 1400px;
   margin: 0 auto;
   .box4-data{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     .box4-box{
       flex: 0 0 calc(25% - 20px);
       //width: 258px;
       //height: 152px;
       font-size: 20px;
       margin-bottom: 30px;
       .box4-box-ico{
         margin: 10px auto;
         width: 98px;
         height: 98px;
         img{
           width: 98px;
           height: 98px;
         }
       }
     }
   }
 }
 .box5{
   width: 100%;
   height: 511px;
   background: url(../../assets/images/ysBg.png) no-repeat;
   background-size: 100% 100%;
   padding: 80px 0;
   margin-top: 60px;
   h3{
     font-weight: 400;
     font-size: 30px;
      margin-top: 20px;
   }
   .box5-data{
       width: 1400px;
       margin: 60px auto 0 auto;
       display: flex;
       justify-content: space-between;
     .box5-data-info{
       font-size: 20px;
       margin-bottom: 30px;
       background: #FFFFFF;
       width: 327px;
       height: 135px;
       top: 5220px;
       left: 618px;
       opacity: 1;
       border-radius: 6px;
       padding-top: 20px;
       h5{
         color: #3167FF;
         font-weight: 700;
         font-style: Bold;
         font-size: 40px;
       }
       p{
         font-weight: 500;
         font-style: Medium;
         font-size: 24px;
         text-align: center;
         color: #999;
       }
     }
   }
 }
 .box6{
   margin: 80px auto;
   .box6-data{
     width: 1400px;
     margin: 30px auto;
     display: flex;
     justify-content: space-between;
     justify-items: center;
   }
   .box6-data-left{
     width: 407px;
     text-align: left;
     h5{
       font-weight: 700;
       font-style: Bold;
       font-size: 34px;
       margin-bottom: 30px;
       em{
         vertical-align: middle;
         margin-left: 10px;
         img{
           vertical-align: middle;
           width: 46px;
           height: 46px;
           display: block;

         }
       }
     }
     span{
       color: #666666;
       font-size: 22px;
       display: block;
       margin-bottom: 20px;
       i{
         vertical-align: middle;
         display: inline-block;
         width: 10px;
         height: 10px;
         background:#666;
         border-radius: 50%;
       }
     }
   }
   .box6-data-right{
     width: 916px;
     height: 404px;
     top: 5681px;
     left: 726px;
     opacity: 1;
     img{
       width: 100%;
       height: 100%;
     }
   }
 }
 .box7{
   background: #F6F8FC;
   .box7Center{
     width: 1400px;
     margin: 80px auto 0 auto;
     padding: 60px 0;
     h3{
       font-weight: 400;
       color: #000;
       font-size: 30px;
       margin: 10px 0;
     }
   }
   .box7-data-info{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin: 60px auto 0 auto;
     p{
       flex: 0 0 calc(25% - 10px);
       width: 334px;
       height: 126px;
       font-size: 20px;
       margin-bottom: 20px;
     }
   }
 }
 .box8{
   margin: 80px auto;
   padding-bottom: 30px;
   h2{
     margin-bottom: 30px;
     font-size: 30px;
     color: #000;
   }
 }
 .box9{
   background: radial-gradient(26.69% 61.72% at 16.28% 56.28%, #E8F5FF 0%, rgba(255, 255, 255, 0) 100%);
   .box9-data{
     width: 1400px;
     margin: 80px auto;
      display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     overflow: hidden;
     .box9-data-info{
       //float: left;
       width: 685px;
       //flex: 0 0 calc(50% - 20px);
       padding: 15px;
       font-size: 18px;
       box-shadow: 0px 8px 10px 0px #D9D9D973;
       margin-bottom:30px ;
       border-radius: 6px;
       background: white;
       overflow: hidden;
       transition: all 0.4s ease;


       .box9-data-title{
         display: flex;
         justify-content: space-between;
         transition: background 0.3s ease;
         margin-bottom: 20px;
         cursor: pointer;

         h5{
           color: #000;
           font-size: 18px;
         }
         span i{
           display: block;
           width:17px;
           height: 20px;
           margin-right: 10px;
         }
         .icon-expand{
           width:27px;
           height: 20px;
           background: url(../../assets/images/botUpIcon.png) no-repeat;
           background-size: 100% 100%;
         }
         .icon-collapse{

           background: url(../../assets/images/upIcon.png) no-repeat;
           background-size: 100% 100%;
         }
       }
       .box9-data-title:hover {
         color: #3167FF;
       }
        p{
          transition: all 0.4s ease;
          text-align: left;
          font-size: 18px;
          color: #666;
        }
     }
     .box9-data-info:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     }
   }

 }

</style>